<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>2制造一个汽车</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <!-- 允许您将模型导入到场景中 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- 允许您使用触摸屏 -->
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <!-- earcut算法 -->
    <script src="F:/VScode/babylonjs/babylon-demo1/src/earcut.js"></script>
</head>

<body>
    <canvas
        id="renderCanvas"
        touch-action="none"
    ></canvas>
    <!-- 注意browseatouch-action="none"以获得PEPr/canvas调整大小事件的最佳效果 -->


    <script>
        const canvas = document.getElementById("renderCanvas"); //获取canvas元素
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        //在这里添加与playground格式匹配的代码
        const createScene = function () {
            const scene = new BABYLON.Scene(engine);//使用引擎
            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 2, new BABYLON.Vector3(0, 0, 0));//设置摄像机
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));//设置灯光

            const car = buildCar();
            buildWheels(car);

            return scene;

        }
        const buildCar = () => {
            //俯视图-长一点的边
            const outline = [
                new BABYLON.Vector3(-0.3, 0, -0.1),
                new BABYLON.Vector3(0.2, 0, -0.1),
            ]

            //俯视图-弯曲弧线部分
            //(0.2,0,-0.08)(0.2,0,-0.07)(0.18,0,-0.01)(0.12,0,0.06)等
            for (let i = 0; i < 20; i++) {
                outline.push(new BABYLON.Vector3(0.2 * Math.cos(i * Math.PI / 50), 0, 0.2 * Math.sin(i * Math.PI / 50) - 0.1));
            }

            //俯视图-短一点的边
            outline.push(new BABYLON.Vector3(0, 0, 0.1));
            outline.push(new BABYLON.Vector3(-0.3, 0, 0.1));

            // car face UVs
            const carUV = [];
            carUV[0] = new BABYLON.Vector4(0, 0.5, 0.38, 1);//顶部
            carUV[1] = new BABYLON.Vector4(0, 0, 1, 0.5);//depth拉伸处
            carUV[2] = new BABYLON.Vector4(0.38, 1, 0, 0.5);//底部，图像进行翻转

            //car material
            const carMat = new BABYLON.StandardMaterial("carMat");
            carMat.diffuseTexture = new BABYLON.Texture("F:/VScode/babylonjs/babylon-demo1/src/imgs/car.png");

            //back formed automatically
            const car = BABYLON.MeshBuilder.ExtrudePolygon("car", { shape: outline, depth: 0.2, faceUV: carUV, wrap: true });
            car.material = carMat;


            return car;

        }

        const buildWheels = (car) => {
            //wheel face UVs
            const wheelUV = [];
            wheelUV[0] = new BABYLON.Vector4(0, 0, 1, 1);
            wheelUV[1] = new BABYLON.Vector4(0, 0.5, 0, 0.5);
            wheelUV[2] = new BABYLON.Vector4(0, 0, 1, 1);

            //wheel material
            const wheelMat = new BABYLON.StandardMaterial("wheelMat");
            wheelMat.diffuseTexture = new BABYLON.Texture("F:/VScode/babylonjs/babylon-demo1/src/imgs/wheel.png");

            const wheelRB = BABYLON.MeshBuilder.CreateCylinder("wheelRB", { diameter: 0.125, height: 0.05, faceUV: wheelUV, wrap: true })
            wheelRB.parent = car;
            wheelRB.position.z = -0.1;
            wheelRB.position.x = -0.2;
            wheelRB.position.y = 0.035;
            wheelRB.material = wheelMat;
            // 其余轮子克隆完成
            wheelRF = wheelRB.clone("wheelRF");
            wheelRF.position.x = 0.1;

            wheelLB = wheelRB.clone("wheelLB");
            wheelLB.position.y = -0.2 - 0.035;

            wheelLF = wheelRF.clone("wheelLF");
            wheelLF.position.y = -0.2 - 0.035;

        }

        const scene = createScene(); //调用createScene函数

        //注册一个渲染循环来重复渲染场景
        engine.runRenderLoop(function () {
            scene.render();
        });

        // 注意浏览器、画布大小调整事件
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>

</html>